requirejs.config({
    paths: {
        g2plot: "/assets/addons/health/libs/g2plot"
    }
})
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'g2plot'], function ($, undefined, Backend, Table, Form, G2Plot) {
    const {Funnel, Pie, Bar} = G2Plot;
    let piePlot, plot;
    var Controller = {
        index     : () => {
            new Vue({
                el: '#DashboardIndex',
                data() {
                    return {
                        pickerOptions: {
                            shortcuts: [
                                {
                                    text: '今天',
                                    onClick(picker) {
                                        const end = new Date();
                                        const start = new Date();
                                        picker.$emit('pick', [start, end]);
                                    }
                                },
                                {
                                    text: '最近一周',
                                    onClick(picker) {
                                        const end = new Date();
                                        const start = new Date();
                                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                        picker.$emit('pick', [start, end]);
                                    }
                                }, {
                                    text: '最近一个月',
                                    onClick(picker) {
                                        const end = new Date();
                                        const start = new Date();
                                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                        picker.$emit('pick', [start, end]);
                                    }
                                }, {
                                    text: '最近半年',
                                    onClick(picker) {
                                        const end = new Date();
                                        const start = new Date();
                                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                                        picker.$emit('pick', [start, end]);
                                    }
                                }, {
                                    text: '最近一年',
                                    onClick(picker) {
                                        const end = new Date();
                                        const start = new Date();
                                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                                        picker.$emit('pick', [start, end]);
                                    }
                                }]
                        },
                        dashboard    : {
                            statistics: {
                                user_total       : 0,
                                new_user_total   : 0,
                                active_user_total: 0,
                                order_amount_sum : 0,
                            },
                            area_user : []
                        },
                        where        : {
                            date: '',
                        }
                    }
                },
                watch: {
                    'where.date'(newVal) {
                        this.getDashboardData()
                    }
                },
                created() {
                    this.where.date = Config.default_date
                },
                mounted() {
                },
                methods: {
                    userRemainRender(data) {
                        if (plot) {
                            plot.destroy();
                        }
                        plot = new Funnel('user-remain-container', {
                            data         : data,
                            height       : 330,
                            xField       : 'name',
                            yField       : 'number',
                            legend       : {
                                layout  : 'vertical',
                                position: 'right'
                            },
                            conversionTag: false,
                        });
                        plot.render();
                    },
                    userChannelRender(data) {
                        if (piePlot) {
                            piePlot.destroy();
                        }
                        piePlot = new Pie('user-channel-container', {
                            appendPadding: 10,
                            data,
                            angleField   : 'number',
                            colorField   : 'name',
                            radius       : 0.9,
                            label        : {
                                type   : 'inner',
                                offset : '-30%',
                                content: ({percent}) => `${(percent * 100).toFixed(0)}%`,
                                style  : {
                                    fontSize : 14,
                                    textAlign: 'center',
                                },
                            },
                            interactions : [{type: 'element-active'}],
                        });
                        piePlot.render();
                    },
                    getDashboardData() {
                        let that = this;
                        Fast.api.ajax({
                            url    : 'health/dashboard/index',
                            loading: true,
                            type   : 'post',
                            data   : {
                                date: that.where.date,
                            },
                        }, function (res) {
                            that.dashboard = res;
                            that.userRemainRender(res.user_remain)
                            that.userChannelRender(res.user_channel)
                            return false;
                        })
                    }
                }
            })
        },
        statistics: () => {
            let wherePrams = {province_id: '', day: '', channel_id: ''}
            new Vue({
                el: '#DashboardStatistics',
                data() {
                    return {
                        pickerOptions: {
                            disabledDate(time) {
                                // 创建一个当前日期的 Date 对象
                                let currentDate = new Date();
                                currentDate.setHours(0, 0, 0, 0);
                                return time.getTime() >= currentDate.getTime();
                            },
                        },
                        activeName   : 'first',
                        provinceData : [],
                        channelData  : [],
                        data         : [],
                        statistics   : {},
                        offset       : 0,
                        limit        : 10,
                        totalPage    : 0,
                        currentPage  : 1,
                        where        : $.extend(true, {}, wherePrams),
                        action       : 'table',
                    };
                },
                created() {
                    this.provinceData = Config.province;
                    this.channelData = Config.channel;
                    this.getData()
                },
                watch  : {
                    activeName: function (newValue, oldValue) {
                        if (newValue === 'second') {
                            this.action = 'bar'
                            this.setWeekDate();
                            this.barG2Plot();
                        }
                        if (newValue === 'first') {
                            this.action = 'table'
                            this.operation('clear', {action: 'table'})
                        }
                    }
                },
                methods: {
                    getData(action = 'table', callback = null) {
                        let that = this;
                        Fast.api.ajax({
                            url    : 'health/dashboard/statistics',
                            loading: true,
                            type   : 'GET',
                            data   : $.extend(true, {
                                action: action,
                                page  : that.currentPage,
                                limit : that.limit,
                            }, that.where),
                        }, function (ret, res) {
                            if (action === 'table') {
                                that.data = res.data.rows;
                                that.totalPage = res.data.total;
                                that.statistics = res.data.statistics
                            }
                            if (typeof callback === 'function') {
                                callback(ret);
                            }
                            return false;
                        })
                    },
                    setWeekDate() {
                        this.where.day = [
                            moment().subtract(7, 'days').format('YYYY-MM-DD'),
                            moment().subtract(1, 'days').format('YYYY-MM-DD')
                        ]
                        console.log(this.where)
                    },
                    operation(type, params = {}) {
                        let that = this;
                        let action = params.action || 'table';
                        switch (type) {
                            case 'export':
                                let queryString = $.param($.extend(true, {
                                    action: 'export',
                                }, that.where));
                                window.location.href = Config.moduleurl + '/health/dashboard/statistics?' + queryString;
                                break;
                            case 'filter':
                                if (action === 'bar') {
                                    this.barG2Plot();
                                } else {
                                    this.getData()
                                }
                                break;
                            case 'clear':
                                this.where = $.extend(true, {}, wherePrams);
                                if (action === 'bar') {
                                    this.setWeekDate()
                                }
                                break;
                        }
                    },
                    handleSizeChange(val) {
                        this.offset = 0
                        this.limit = val;
                        this.currentPage = 1;
                        this.getData()
                    },
                    handleCurrentChange(val) {
                        this.currentPage = val;
                        this.offset = (val - 1) * this.limit;
                        this.getData()
                    },
                    tableRowClassName({rowIndex}) {
                        if (rowIndex % 2 === 1) {
                            return 'bg-color';
                        }
                        return '';
                    },
                    tableCellClassName({columnIndex}) {
                        if (columnIndex === 2 || columnIndex === 9) {
                            return 'cell-left';
                        }
                        return '';
                    },
                    barG2Plot() {
                        this.getData('bar', function (data) {
                            $('#container-bar').empty();
                            const bar = new Bar('container-bar', {
                                data       : data,
                                xField     : 'value',
                                yField     : 'label',
                                seriesField: 'label',
                                legend     : {
                                    position: 'top-left',
                                },
                            });
                            bar.render()
                        });

                    }
                }
            })
        }
    }
    return Controller;
});